<template>
	<view class="comment-page">
		<uv-gap height="5" bgColor="transparent" />
		<view class="commnet-section" v-for="(item,index) in model.product">
			<lst-upvedio :multiple="true" :maxImageCount="5" :maxVedioCount="1" @success="e => upSuccess(e,index)"></lst-upvedio>
			<ratingPage :imgUrl="item.product_image" :modelValue="item.star_rating" @change="e =>onChange(e,index)"/>
			<uv-gap height="10" bgColor="transparent" />
			<uv-textarea v-model="item.content" placeholder="多多描述商品和使用感受，更受欢迎哦" :maxlength="255" />
		</view>
		
		<view class="footer-btn">
			<view class="btn-div">
				<button type="button" class="btn_sure" @click="doSubmit">提交评价</button>
			</view>
			<view class="pingjia">
				<uv-checkbox-group v-model="is_anonymous" activeColor="#D32D26" inactiveColor="#D32D26">
					<uv-checkbox name="1" label="匿名评价" shape="circle" customStyle="padding:10px 0;">
					</uv-checkbox>
				</uv-checkbox-group><strong></strong>
			</view>	
		</view>
		
	</view>	
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onBeforeUnmount
	} from 'vue'
	import {
		addMarketCommnet
	} from '@/api'
	import {
		getIconPath
	} from '@/util'
	import {
		useRefreshStore,useCommnetStore
	} from '@/store'
	import { backToTargetPage } from '@/util/tools'
	import ratingPage from './components/rating.vue'
	const refreshStore = useRefreshStore()
	const commentStore = useCommnetStore()
	const model = ref([{
		"oid" : 0,
		"product": []
	}])
	const is_anonymous = ref([])
	onMounted(() => {
		// 从 Pinia 获取订单数据
		model.value = commentStore.commentData;
	})
	onBeforeUnmount(() => {
		// 使用后可以清除数据
		commentStore.clearCommentData()
	})
	const upSuccess = (fileList,index) => {
		model.value.product[index]["image"] = fileList.filter(file => file.fileType === 'image').map(({src}) => src)
		let vedio = fileList.filter(file => file.fileType === 'video').map(({ src: { url }}) => url)
		if(vedio.length > 0){
			model.value.product[index]["video"] = vedio[0]
		}
	}
	
	const onChange = (rating,index) => {
		model.value.product[index]["star_rating"] = rating
	}
	
	const doSubmit = () => {
		const newData = {
		    ...model.value, // 保留其他字段（oid, is_anonymous）
		    product: model.value.product.map(({ product_image, ...rest }) => rest)
		};
		newData.is_anonymous = is_anonymous.value.length > 0 ? 1 : 0
		const productErrors = [];
		for (let i = 0; i < newData.product.length; i++) {
		    const product = newData.product[i];
		    // 检查 star_rating
		    if (!product.star_rating || product.star_rating == 0) {
		        productErrors.push(`请为商品${i+1}选择评分`);
		    }
	
		    // 检查 content
		    if (!product.content || typeof product.content !== 'string' || product.content.trim() === '') {
		        productErrors.push(`请为商品${i+1}填写评价内容`);
		    }
		}
		if (productErrors.length > 0) {
		    uni.$uv.toast(productErrors.join('；'));
		    return;
		}
		addMarketCommnet(newData).then(res => {
			if (res.code == 200) {
				refreshStore.setRefresh(true,{current:4,evaluation_status:2})
				backToTargetPage('pages-home/market/index')
				/* uni.navigateTo({
					url: '/pages-home/market/comment_result'
				}) */
			} else {
				uni.$uv.toast(res.msg)
			}
		})
	}
	
</script>

<style lang="scss" scoped>
	.comment-page {
		background-color: #f7f7f7;
		min-height: 100vh;
		padding-bottom: 80px;
	}
	.commnet-section {
		background-color: #fff;
		padding: 10px 15px 20px 15px;
		border-radius: 8px;
		margin: 10px;
	}
	
	.footer-btn {
		position: fixed;
		background-color: #fff;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 10px 15px;
		.btn-div {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.pingjia {
			display: flex;
			align-items: center;
			margin: 0 20px;
		}
		.btn_sure {
			display: flex;
			flex: 1;
			justify-content: center;
			align-items: center;
			height: 80upx;
			line-height: 80upx;
			border-radius: 40upx;
			background-color: #DE3F27;
			color: #fff;
			font-size: 28upx;
		}
	}
</style>